<template>
    <h1>列表渲染v-for-v-if</h1>
    <!-- 同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。 -->
    <!-- 当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名： -->
    <!--
 这会抛出一个错误，因为属性 todo 此时
 没有在该实例上定义
-->
    <li v-for="todo in obj" v-if="!todo.done">
        {{ todo.name }}
    </li>

    <!-- 在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)： -->
    <template v-for="todo in obj">
        <li v-if="!todo.done">
            {{ todo.name }}
        </li>
    </template>
</template> 
 

  
<script setup>
import { ref, reactive, computed } from "vue";
const obj = reactive(
    {
        name: '张三',
        age: '18',
        done: true
    },
    {
        name: '王五',
        age: '20',
        done: false
    },

)

</script>



